{extend name="public/container"}
{block name="content"}
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
         <div class="ibox-title">
                <h5>搜索</h5>
                
                <div class="ibox-content" style="display: block;">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">姓名编号：</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="title"  style="width: 100%" autocomplete="off" placeholder="请输入标题" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">分类</label>
                                <div class="layui-input-inline">
                                    <select name="cid" id="">
                                            <option value="">全部</option>
                                        {volist name="tree" id="vv"}
                                            <option value="{$vv.id}">{$vv.html}{$vv.title}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="search" >
                                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索</button>
                                </label>
                            </div>
                        </div>
                       
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-content">
                <div class="table-responsive">
                    <table class="layui-hide" id="List" lay-filter="List"></table>
                    <script type="text/html" id="toolbarDemo">
                        <div class="layui-btn-container">
                            <button class="layui-btn" onclick="op_iframe('添加', '{:url('article.article/form')}',{w:1200,h:700})"><i
                                class="layui-icon layui-icon-add-circle"></i>添加
                            </button>
                            <button class="layui-btn layui-btn-danger" lay-event='delAll'><i
                            class="layui-icon layui-icon-delete"></i>全部删除
                            </button>
                            <button class="layui-btn" lay-event='export'><i
                            class="layui-icon layui-icon-export"></i>导出
                            </button>
                        </div>
                    </script>
                    <script type="text/html" id="barDemo">
                        <button type="button" class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</button>
                        <button type="button" class="layui-btn layui-btn-xs layui-btn-dange" lay-event="delete"><i class="layui-icon layui-icon-edit"></i>删除</button>
                        <!-- <button type="button" class="layui-btn layui-btn-xs" onclick="dropdown(this)">操作 <span class="caret"></span></button>
                        <ul class="layui-nav-child layui-anim layui-anim-upbit">
                            <li>
                                <a href="javascript:void(0);" lay-event="see1">
                                    <i class="layui-icon layui-icon-edit"></i> 操作1</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" lay-event="see2">
                                    <i class="layui-icon layui-icon-edit"></i> 操作2</a>
                            </li>
                        </ul> -->
                    </script>
                    <script type="text/html" id="thumb">
                        <img style="cursor: pointer;width:50px;height:50px;border-radius:50%" class="avatar" lay-event='open_image' src="{{d.image_input}}">
                     </script>
                     <script type="text/html" id="hot">

                        <input type="checkbox" name="is_hot" value="{{d.id}}" lay-skin="switch" lay-text="是|否" lay-filter="is_hot" {{ d.is_hot == 1 ? 'checked' : '' }}>
                    </script>
                    <script type="text/html" id="hide">
                        {{# if(d.hide==1){ }}
                            <span>显示</span>
                        {{# }else if(d.sex ==2){ }}
                            <span>隐藏</span>
                        {{# }else{ }}
                            <span>未设置</span>
                        {{# } }}
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{__ADMIN_PATH__}js/layuiList.js"></script>
{/block}
{block name="script"}
<script>
     layList.form.render();
     var ins = layList.tableList('List',"{:Url('index')}",function () {
            return [
                {"type":"checkbox"},
                {"field":"id","title":"编号","sort":true},
                {"field":"title","title":"标题","edit":true},
                {"field":"catename",'align':'center',"title":"分类",'templet':function(d){return '<button type="button" class="layui-btn layui-btn-radius layui-btn-warm layui-btn-xs">'+d.catename+'</button>'}},
                {"field":"image_input","title":"图片","align":"center",'templet': '#thumb'},
                {"field":"is_hot","title":"是否热门","align":"center",'templet': '#hot'},
                {"field":"hide","title":"是否显示","align":"center",'templet': '#hide'},
                {"field":"visit","title":"浏览量","align":"center","sort":true,"edit":true},
                {"field":"synopsis","title":"摘要","align":"center","edit":true},
                {"fixed":"right","title":"操作","align":"center","toolbar":"#barDemo"}]      
        })
         //查询
         layList.search('search', function (where) {
            layList.reload(where, true);
        });
        //监听并执行排序
        layList.sort(['id', 'sort'], true);
           //快速编辑
           layList.edit(function (obj) {
            var id = obj.data.id, value = obj.value;
            action.set_value(obj.field, id, value);
        });
        layList.form.on('switch(is_hot)', function (obj) {
            action.set_value(this.name, this.value, obj.elem.checked ? 1 : 0);
        });
        //头工具栏事件
        layList.table.on('toolbar(List)', function (obj) {
            var checkStatus = layList.table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'delAll':
                    var data = checkStatus.data;
                    if (data.length > 0) {
                        var ids = [];
                        for (let index = 0; index < data.length; index++) {
                            ids.push(data[index].id)
                        }
                        action.del(ids);
                    } else {
                        layList.msg('没有选择数据!');
                        return;
                    }

                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
                case 'export':
                    var laytable = layList;
                    layList.baseGet('export',{},function(res){
                        laytable.table.exportFile(ins.config.id,res.data,'xls');
                    })
                break;
            };
        });
        //点击事件绑定
        layList.tool(function (event, data, obj) {
            switch (event) {
                case 'delete':
                    action.del(data.id, obj);
                    break;
                case 'edit':
                    layList.createModalFrame('编辑', 'form/id/' + data.id, {w:1200,h:700});
                    break;
                case 'open_image':
                    layList.openImage(data.image_input);
                    break;
               
            }
        })
        
        //自定义方法
        var action = {
            set_value: function (field, id, value) {
                layList.basePost('set_value', { field: field, id: id, value: value }, function (res) {
                    layList.msg(res.msg);
                },function(res){
                    layList.layer.alert(res.msg,{icon:2,title:false});
                });
            },

            del: function (id, obj) {
                layer.confirm('确认删除么？', { icon: 3, title: '警告' }, function () {
                    layList.basePost('del', { id, id }, function (res) {
                        if (res.code == 200) {
                            layList.msg(res.msg, function () {
                                layer.closeAll();
                                $(obj.tr.selector).remove();
                            })
                        }

                    });
                })
            }
        }
</script>
{/block}